<script setup lang="ts">
import ToolView from "@/modules/tools/layout/tool-view.vue";
import { computed, reactive } from "vue";
import cronstrue from "cronstrue/i18n";

import { copyText } from "@/util/clipboard.ts";

const values = reactive({
  seconds: "*/1",
  minutes: "*",
  hour: "*",
  day: "*",
  month: "*",
  dayOfWeek: "*",
  year: "*",
});
const reset = () => {
  values.seconds = "*/1";
  values.minutes = "*";
  values.hour = "*";
  values.day = "*";
  values.month = "*";
  values.dayOfWeek = "*";
  values.year = "*";
};

const cron = computed(() => {
  return [values.seconds, values.minutes, values.hour, values.day, values.month, values.dayOfWeek, values.year].map(it => it.trim() || "*").join(" ");
});
const cronstrueConfig = reactive({
  verbose: true,
  dayOfWeekStartIndexZero: true,
  use24HourTimeFormat: true,
  throwExceptionOnParseError: true,
  locale: "zh_CN",
});

const cronResult = computed(() => {
  try {
    return {
      value: cronstrue.toString(cron.value, cronstrueConfig),
      isCronValid: true,
    };
  } catch (e: any) {
    console.log(e);
    return {
      value: e.toString(),
      isCronValid: false,
    };
  }
});

const inputState = computed(() => (cronResult.value.isCronValid ? undefined : "error"));
</script>

<template>
  <tool-view title="Crontab表达式生成" description="验证并生成crontab，并获取cron调度的可读描述。">
    <div class="p-20 full-view flex-center">
      <div class="w-full flex-column aic">
        <a-space>
          <a-input v-model:value="values.seconds" :status="inputState" size="large" class="cron-input" />
          <a-input v-model:value="values.minutes" :status="inputState" size="large" class="cron-input" />
          <a-input v-model:value="values.hour" :status="inputState" size="large" class="cron-input" />
          <a-input v-model:value="values.day" :status="inputState" size="large" class="cron-input" />
          <a-input v-model:value="values.month" :status="inputState" size="large" class="cron-input" />
          <a-input v-model:value="values.dayOfWeek" :status="inputState" size="large" class="cron-input" />
          <a-input v-model:value="values.year" :status="inputState" size="large" class="cron-input" />
        </a-space>
        <a-space class="mt-20">
          <a-checkbox v-model:checked="cronstrueConfig.verbose">输出详情</a-checkbox>
          <a-checkbox v-model:checked="cronstrueConfig.use24HourTimeFormat">24小时制</a-checkbox>
          <a-checkbox v-model:checked="cronstrueConfig.dayOfWeekStartIndexZero">每周从0开始计</a-checkbox>
          <a-button @click="reset">重置</a-button>
          <a-button @click="copyText(cron)">复制</a-button>
        </a-space>
        <div class="mt-20 font-20">
          <span :class="[cronResult.isCronValid ? 'color-success' : 'color-danger']">{{ cronResult.value }}</span>
        </div>

        <div class="mt-50">
          <pre class="font-16">
┌───────────── [optional] seconds (0 - 59)
| ┌─────────── minute (0 - 59)
| | ┌───────── hour (0 - 23)
| | | ┌─────── day of month (1 - 31)
| | | | ┌───── month (1 - 12) OR jan,feb,mar,apr ...
| | | | | ┌─── day of week (0 - 6, sunday=0) OR sun,mon ...
| | | | | | ┌─ year (optional)
* * * * * * * command</pre
          >
        </div>
      </div>
    </div>
  </tool-view>
</template>

<style scoped lang="less">
.cron-input {
  letter-spacing: 3px;
  font-size: 28px;
  width: 130px;
  text-align: center;
}
</style>
